import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login/index.vue'
import Home from '@/views/home/index.vue'
import Layout from '@/views/layout/index.vue'
import Article from '@/views/article/index.vue'
import Publish from '@/views/publish/index.vue'
import Image from '@/views/image/index.vue'
import Comment from '@/views/comment/index.vue'
import Settings from '@/views/settings/index.vue'

// 在 VueCLI 创建的项目中 @ 表示 src 目录
// 它是 src 目录的路径别名
// 好处：它不受当前文件路径影响
// 注意：@ 就是 src 路径，后面别忘了有个 /
// 使用建议：如果加载的资源路径就在当前目录下，那就正常写
//      如果需要进行父级路径查找的 都使用 @

Vue.use(VueRouter)
 
// 路由配置表
const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/',
    // 命名路由 layout 有一个默认子路由,这个名字没有意义,所以警告
    // 正确的做法是 如果有默认子路由 就不要给父路由起名字了
    // name: 'layout',
    component: Layout,
    children: [
      {
        // 我们通常会把 / 设置为网站的首页 因为我们在手动输入网址访问网站的时候可以省略斜杠，如果你是别的名称 则必须加上斜杠
        path: '', //path为空 会作为默认子路由(只能有一个默认子路由)渲染,也就是说当你访问父路由,那么这个path为空的子路由就会渲染到父路由的出口里面 
        name: 'home',
        component: Home
      },
      {
        path: '/article',
        name: 'article',
        component: Article
      },
      {
        path: '/publish',
        name: 'publish',
        component: Publish
      },
      {
        path: '/image',
        name: 'image',
        component: Image
      },
      {
        path: '/comment',
        name: 'comment',
        component: Comment
      },
      {
        path: '/settings',
        name: 'settings',
        component: Settings
      },


    ]
  }
  
]

const router = new VueRouter({
  routes
})

//路由导航守卫，说白了所有页面的导航都会经过这里，不管你是访问首页还是登录页，都会进入这个路由导航守卫
// beforeEach 是全局前置守卫，任何页面的访问都要经过这里
// 守卫页面的导航的 拦截页面的
// to: 要（访问的页面的路由信息）去的路由信息
// from: 来自哪里的路由信息
// next: 放行的方法
router.beforeEach((to, from, next) => {
  // ...
  // 返回 false 以取消导航
  // 如果要访问的页面不是 /login, 校验登录状态
  // 如果没有登录， 则跳转到登录页面
  // 如果登录了，则允许通过

  // 允许通过,
  // next() 是一定要被调用的
  // return false

  const user = JSON.parse(window.localStorage.getItem('user')) //获取登录后的本地存储的数据 意味着有这个数据的话就代表已经登录过了 不用重复登陆 下面直接跳到首页

  // 校验非登录页面的登录状态

  if (to.path !== '/login') {
    if (user) {
      // 已登录，则允许通过
      next()
    } else {
      // 没有登录，跳转到登录页面
      next('/login')
    }
  } else {
    //登录页面，正常允许通过
    next()
  }
})
export default router
